﻿@model GolfLeague.ViewModels.UsersViewModel

<script type="text/javascript">
    $(document).ready(function () {
        $('#dialogUser').dialog({
            autoOpen: false,
            model: true
        });
        $('#dialogRole').dialog({
            autoOpen: false,
            model: true
        });
        $('input:button').button({ icons: { primary: 'ui-icon-pencil' }, text: false });
        $('button').button({ icons: { primary: 'ui-icon-trash' }, text: false });
        $('input:submit').button();
        $('input:reset').button();
        $('div.buttonlist a').hover(
		    function () { $(this).addClass('ui-state-hover'); },
		    function () { $(this).removeClass('ui-state-hover'); }
	    );
    });

    $(function () {
        $(".EditUser").click(function (e) {
            e.preventDefault();
            var recordToEdit = $(this).attr("id");
            recordToEdit = recordToEdit.replace("edit-", "");

            if (recordToEdit != '') {
                window.location = '/Users/EditUser/' + recordToEdit;
            }
        });
    });

    $(function () {
        $(".DeleteUser").click(function (e) {
            e.preventDefault();
            var recordToDelete = $(this).attr("id");
            recordToDelete = recordToDelete.replace("delete-", "");

            $("#dialogUser").dialog("option", "buttons", {
                "Yes": function () {
                    $(this).dialog("close");
                    if (recordToDelete != '') {
                        $.post("/Users/DeleteUser", { "id": recordToDelete },
                        function (data) {
                            $('#row-' + recordToDelete).fadeOut('slow');
                        });
                    }
                },
                "No": function () {
                    $(this).dialog("close");
                    return false;
                }
            });
            $("#dialogUser").dialog("open");
        });
    });

    $(function () {
        $(".EditRole").click(function (e) {
            e.preventDefault();
            var recordToEdit = $(this).attr("id");
            recordToEdit = recordToEdit.replace("edit-", "");

            if (recordToEdit != '') {
                window.location = '/Users/EditRole/' + recordToEdit;
            }
        });
    });

    $(function () {
        $(".DeleteRole").click(function (e) {
            e.preventDefault();
            var recordToDelete = $(this).attr("id");
            recordToDelete = recordToDelete.replace("delete-", "");

            $("#dialogRole").dialog("option", "buttons", {
                "Yes": function () {
                    $(this).dialog("close");
                    if (recordToDelete != '') {
                        $.post("/Users/DeleteRole", { "id": recordToDelete },
                        function (data) {
                            $('#row-' + recordToDelete).fadeOut('slow');
                        });
                    }
                },
                "No": function () {
                    $(this).dialog("close");
                    return false;
                }
            });
            $("#dialogRole").dialog("open");
        });
    });

</script>
@{
    ViewBag.Title = "Users";
}

<h2>User Administration</h2>

<fieldset>
    <legend>Users</legend>
    <table>
        <tr>
            <th>User Name</th>
            <th>Email Address</th>
            <th>Roles</th>
            <th></th>
        </tr>

    @foreach (var item in Model.Users) {
        <tr id="row-@item.UserID">
            <td>@item.Username</td>
            <td>@item.Email</td>
            <td>
                @foreach (var role in item.UserRoles)
                {
                    @:@role<br />
                }
            </td>
            <td>
                <div class="buttonlist">
                    <a href="#" title="Edit Role" class="EditUser ui-state-default ui-corner-all ui-icon ui-icon-pencil" id="edit-@item.UserID"></a> 
                    <a href="#" title="Delete Role" class="DeleteUser ui-state-default ui-corner-all ui-icon ui-icon-trash" id="delete-@item.UserID"></a>
                </div>
            </td>
        </tr>
    }
    </table>
</fieldset>
<br /><br />
<fieldset>
    <legend>Roles</legend>
    <table>
        <tr>
            <th>Role</th>
            <th>Description</th>
            <th></th>
        </tr>

    @foreach (var item in Model.Roles) {
        <tr id="row-@item.RoleID">
            <td>@item.RoleName</td>
            <td>@item.Description</td>
            <td>
                <div class="buttonlist">
                    <a href="#" title="Edit Role" class="EditRole ui-state-default ui-corner-all ui-icon ui-icon-pencil" id="edit-@item.RoleID"></a> 
                    <a href="#" title="Delete Role" class="DeleteRole ui-state-default ui-corner-all ui-icon ui-icon-trash" id="delete-@item.RoleID"></a>
                </div>
            </td>
        </tr>
    }
    </table>
</fieldset>

<div id="dialogUser" title="Confirm Delete">Are you sure you want to delete this user?</div>
<div id="dialogRole" title="Confirm Delete">Are you sure you want to delete this role?</div>